<template>
  <view class="tab_set">
    <!-- 设置胶囊顶部 -->
    <view class="MenuButton_top"></view>
    <!-- 实际导航栏 可封装自定义组件  -->
    <view class="back_Tag" v-if="top"> <uni-icons type="left" size="25"></uni-icons></view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
// 箭头 由于直接写箭头程序报错 只能赋值变量
const str = ref('<')
// 获取胶囊的距离
const top = ref('') //上方距离
const pageheight = ref('') //整个导航栏高度
const height = ref('') //实际导航栏高度
onLoad(() => {
  const res = uni.getMenuButtonBoundingClientRect() //获取胶囊
  top.value = res.top + 'px'
  pageheight.value = res.height + 10 + res.top + 'px'
  height.value = res.height + 'px'
  console.log('获取胶囊位置', height.value)
})
</script>

<style lang="scss" scoped>
// 整个导航栏样式
.tab_set {
  background: linear-gradient(to right, #fec5e5 0%, #ffffff 100%);
  height: v-bind('pageheight');
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  // 上方距离空隙
  .MenuButton_top {
    height: v-bind('top');
  }

  // 内部导航栏
  .back_Tag {
    height: v-bind('height');
    line-height: v-bind('height');
    // font-size: 20px;
    font-weight: 700;
    margin-left: 10rpx;
  }
}
</style>
